<template>
  <div>
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div>
      <el-container class="container_box">
        <div class="aside_box">
          <span>项目类型</span>
          <el-aside width="250px" class="physical_aside" style="background-color: #fff;height: 700px">
            <br/>
            <el-tree
                :data="items"
                :props="defaultProps"
                highlight-current
                @node-click="handleNodeClick"
            ></el-tree>
          </el-aside>
        </div>
        <el-main>

          <div>
            <el-row>
              <el-col :span="22">当前项目</el-col>
              <el-col :span="2">
                <el-button @click="toAdd" type="success">添 加</el-button>
              </el-col>
            </el-row>
            <el-table :data="tableData" highlight-current-row style="width:100%">
              <el-table-column prop="date" label="序号" width="80" type="index">
              </el-table-column>
              <el-table-column prop="groupName" label="分组名称" width="200">
              </el-table-column>
              <el-table-column prop="printCount" label="打印数量" width="150">
              </el-table-column>
              <el-table-column prop="examItemNames" label="包含项目" width="400">
                <template slot-scope="scope">
                  <span>{{ scope.row.examItemNames.length>0 ? scope.row.examItemNames.join("|"):'' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="tagColor" label="标签颜色" width="80">
                <template slot-scope="scope">
                  <span>{{ scope.row.tagColor }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="sampleType" label="样本类型" width="80">
                <template slot-scope="scope">
                  <span>{{ formatType(scope.row.sampleType) }}</span>
                </template>
              </el-table-column>
              <el-table-column width="200" fixed="right" prop="address" label="操作">
                <template slot-scope="scope">
                  <el-button
                      @click="handleClick(scope.row)"
                      type="primary"
                      size="small"
                  >编辑
                  </el-button
                  >
                  <el-button
                      @click="remove(scope.row)"
                      type="danger"
                      size="small"
                  >删除
                  </el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
      </el-container>
    </div>

    <el-dialog
        title="编辑项目打印分组"
        :visible.sync="dialogFormVisible"
        width="1000px"
        class="top_dialog"
    >
      <el-form :model="form" label-position="left" ref="ruleForm">
        <el-form-item label="分组名称" :label-width="formLabelWidth" required>
          <el-input v-model="form.groupName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item class="" label="样本类型" :label-width="formLabelWidth">
          <el-select
              class="form_select"
              v-model="form.sampleType"
              size="medium"
              clearable
          >
            <el-option v-for="(v,i) in dict.ybType" :label="v.itemName" :value="v.dictItemId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="" label="样本颜色" :label-width="formLabelWidth">
          <el-select
              class="form_select"
              v-model="form.tagColor"
              size="medium"
              clearable
          >
            <el-option v-for="(v,i) in colors" :label="v.label" :value="v.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="包含项目" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.items" placeholder="以'|'分隔" :readonly="id!==null"></el-input>
        </el-form-item>

        <el-form-item label="打印数量" :label-width="formLabelWidth">
          <el-input-number :min="1" :precision="0" v-model="form.printCount"></el-input-number>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editForm('ruleForm')">保 存
        </el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import crumbs from "../../views/Crumbs.vue";

export default {
  components: {
    crumbs,
  },
  data() {
    return {
      BreadCrumb: [
        {path: '', name: '基础管理'},
        {path: '/basic/groupmanagement', name: '打印分组'}
      ],
      defaultProps: {
        children: 'children',
        label: 'itemName'
      },
      id: null,
      title: "",
      navId:0,
      colors: [
        {label: "红", value: "1"},
        {label: "绿", value: "2"},
        {label: "蓝", value: "3"},
        {label: "紫", value: "4"},
        {label: "黑", value: "5"},
      ],
      formLabelWidth: "80px",
      dict: {},
      form: {},
      set: 1,
      dialogFormVisible: false,
      tableData: [],
      formInline: {},

      items: [],
    }
  },
  filters:{
  },
  created() {
    this.searchDictList()
  },
  methods: {
    searchDictList() {
      this.$axios.searchDictList({
        codes: ["tyType", "xmType", "jgType", "mzType", "gwType", "zwType", "ybType", "dwxzType", 'zylbType'],
      }).then((res) => {
        if (res.code === "00000") {
          res.data.forEach(v => {
            this.dict[v.dictCode] = v.items
          })
          this.items = this.dict.xmType
          this.navId = this.items[0].dictItemId
          this.getQeurylist()
        }
      });
    },
    formatType(val) {
      const map = {}
      this.dict.ybType.forEach(v => {
        map[v.dictItemId] = v.itemName
      })
      if (map[val] !== undefined) {
        return map[val]
      }
      return val
    },

    handleNodeClick(data) {
      this.navId = data.dictItemId;
      this.getQeurylist()
    },
    toAdd() {
      this.id = null
      this.form = {}
      this.dialogFormVisible = true
    },
    editForm() {
      let params = {
        ...this.form,
        examItemNames:this.form.items === '' ? [] : this.form.items.split('|'),
        itemType:this.navId
      }

      if (this.id === null) {
        this.$axios.insertExamItemsGroup(params).then(res => {
          if (res.code == "00000") {
            this.$message.success("提交成功")
            this.getQeurylist()
            this.dialogFormVisible = false
          }
        })
      } else {
        this.$axios.updateExamItemsGroup({...params, id: this.id}).then(res => {
          if (res.code == "00000") {
            this.$message.success("提交成功")
            this.getQeurylist()
            this.dialogFormVisible = false
          }
        })
      }
    },
    // 编辑
    handleClick(row) {
      this.id = row.id
      this.title = "编辑信息";
      this.dialogFormVisible = true;
      this.$axios.selectExamItemsGroupInfo({
        id: row.id,
      }).then((res) => {
        if (res.code == "00000") {
          this.id = res.data.id;
          this.form = {
            ...res.data,
            sampleType:parseInt(res.data.sampleType),
            items:res.data.examItemNames.join("|")

          };
        }
      });
    },
    // 列表删除
    remove(row) {
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios.updateDepartmentStatus({
          departmentId: row.id,
          status: "Inactive",
        }).then((res) => {
          if (res.code == "00000") {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.departmentList();
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },

    getQeurylist() {
      this.$axios.selectExamItemsGroupList({itemType: this.navId}).then((res) => {
        if (res.code == "00000") {
          this.tableData = res.data;
        }
      });
    },
    // 每页几条
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getQeurylist();
    },
    // 第几页
    handleCurrentChange(val) {
      this.searchForm.pageNo = val;
      this.getQeurylist();
    },

  }
}
</script>

<style scoped>
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #b0c4de;
}

.main_box_title {
  background: #fff;
  padding: 10px;
}

.aside_box_title {
  margin: 0px 8px 10px;
  /* text-align: center; */
}

.header_top .el-divider--horizontal {
  margin-top: 0px;
}

.el-main {
  padding: 0px;
  padding-left: 20px;
}

.staff_form_btn {
  margin-left: 20px;
}

.physical_aside {
  /*height: 100%;*/
}

.box_list_box {
  flex: 1;
  margin-top: 20px;
}

.aside_box {
  padding-top: 30px;
}

.aside_box > span {
  line-height: 34px;
}

.textarea {
  width: 655px;
  /* height: 120px; */
}
</style>
